import Link from "next/link";
import Social from "../../_components/social";
import Form from "./_components/form";
import { getTranslations } from "next-intl/server";

export default async function Page() {
  const t = await getTranslations("authPages");
  return (
    <div className="w-80 flex flex-col">
      <div className="flex justify-between z-10">
        <div className="h-16 text-3xl font-bold text-primary">
          {t("verifyEmail")}
        </div>
      </div>
      <Form />

      <div className="h-16 flex items-center justify-center gap-2">
        <div className="text-muted-foreground">{t("hasAccount")}</div>
        <Link
          className="text-primary hover:underline hover:underline-offset-4"
          href="/auth/register"
        >
          {t("createOne")}
        </Link>
      </div>
      <div className="flex justify-center items-center gap-4">
        <Social />
      </div>
    </div>
  );
}
